<template>
  <div class="mod-demo-ueditor">
<!--    <el-alert-->
<!--      title="提示："-->
<!--      type="warning"-->
<!--      :closable="false">-->
<!--      <div slot-scope="description">-->
<!--        <p class="el-alert__description">1. 此Demo只提供UEditor官方使用文档，入门部署和体验功能。具体使用请参考：http://fex.baidu.com/ueditor/</p>-->
<!--        <p class="el-alert__description">2. 浏览器控制台报错“请求后台配置项http错误，上传功能将不能正常使用！”，此错需要后台提供上传接口方法（赋值给serverUrl属性）</p>-->
<!--      </div>-->
<!--    </el-alert>-->

    <script :id="ueId" class="ueditor-box" type="text/plain" style="width: 100%; height: 260px;"></script>

<!--    &lt;!&ndash; 获取内容 &ndash;&gt;-->
<!--    <p><el-button @click="getContent()">获得内容</el-button></p>-->
<!--    <el-dialog-->
<!--      title="内容"-->
<!--      :visible.sync="dialogVisible"-->
<!--      :append-to-body="true">-->
<!--      {{ ueContent }}-->
<!--      <span slot="footer" class="dialog-footer">-->
<!--        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>-->
<!--      </span>-->
<!--    </el-dialog>-->
  </div>
</template>

<script>
  import ueditor from 'ueditor'
  export default {
    data () {
      return {
        ue: null,
        ueId: `J_ueditorBox_${new Date().getTime()}`,
        ueContent: '',
        // dialogVisible: false
      }
    },
    mounted () {
      this.ue = ueditor.getEditor(this.ueId, {
        // serverUrl: '', // 服务器统一请求接口路径
        zIndex: 3000
      })
    },
    // methods: {
    //   getContent () {
    //     this.dialogVisible = true
    //     this.ue.ready(() => {
    //       this.ueContent = this.ue.getContent()
    //     })
    //   }
    // }
  }
</script>

<style lang="scss">
  .mod-demo-ueditor {
    position: relative;
    z-index: 510;
    > .el-alert {
      margin-bottom: 10px;
    }
  }
</style>
